<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name = "loginform" action = "/login" >
        <div class="">
            <label for = "" id = "phoneinput">手机</label>
            <input type="text" name = "phone" id = "phoneinput" 
            placeholder = "请输入手机" required pattern = "/^[0-9]{11}$/">
        </div>
        <div>
            <button type = "submit">提交</button>
        </div>
    </form>
    <script>
        const oform = document.forms['loginform'];
        oform.addEventListener('submit',function(event){
                 event.preventDefault();
                 const phone = oform["phone"].value.trim();
                // console.log(phone);
                // 为空的话 
                // required html5 input 才有的属性
                 if (!phone.length) {
                     alert("手机号不能为空");
                     return 
                 }
                 if (!/^[0-9]{11}$/.test(phone)) {
                           alert("手机格式有误");
                 };
                 this.submit();
        })
        </script>
</body>
</html>